<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <!-- 输入框 -->
        <el-col :span="5" :offset="18">
          <el-input
            placeholder="输入实验室编号查找"
            clearable
            type="sousuo"
            v-model="queryInfo.query"
            @clear="getuserlist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table
        :data="
          userlist.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        stripe
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="实验室编号" prop="laboratory_id">
        </el-table-column>
        <el-table-column label="实验室名称" prop="laboratory_name">
        </el-table-column>
        <el-table-column label="实验室地址" prop="place"> </el-table-column>
        <el-table-column label="状态" prop="type">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type == 0"> 未借出 </el-tag>
            <el-tag type="danger" v-if="scope.row.type == 1"> 已借出 </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 搜索关键字
        query: "",
      },
      currentPage: 1,
      pageSize: 8,
      userlist: [],
      total: 0,
    };
  },
  created() {
    this.getuserlist();
  },
  methods: {
    async getuserlist() {
      const { data: res } = await this.$http.get("/api/laboratory/showall");

      this.userlist = res.data;
      this.total = res.data.length;
    },
    showAddDialog() {
      this.addDialogVisible = true;
    },
    // 监听  pagesize 改变的事件
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async search() {
      const { data: res } = await this.$http.post("/api/laboratory/show", {
        laboratory_id: this.queryInfo.query,
      });

      this.userlist = res.data;
    },
  },
};
</script>

<style>
.el-button--goon {
  background: #20b2aa !important;
  color: #fafdfd !important;
  font-size: 14px !important;
}
.el-table-column {
  text-align: center;
}
.el-form-item {
  text-align: center;
}
</style>